<template>
  <div class="home-banner">
    <!-- 设置轮播图组件(轮播图插件) -->
    <!-- slides 是传入轮播数据 auto-play设置自动播放 :duration设置轮播时间 -->
    <XtxCarousel :slides='slides' auto-play :duration='2' />
  </div>
</template>
<script>
import { ref } from 'vue-demi'
// 导入获取轮播图的api接口
import { findBanner } from '../../../api/home'
export default {
  name: 'HomeBanner',
  setup () {
    // ref可以储存数据数据
    const slides = ref([])
    // 储存获取到的轮播数据
    findBanner().then(ret => {
      slides.value = ret.result
    }).catch((err) => {
      console.log(err)
    })
    return { slides }
  }
}
</script>
<style scoped lang="less">
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  // /deep/设置深度选择器 覆盖轮播图原样式(覆盖插件上的默认样式)
  .xtx-carousel {
    /deep/ .carousel-btn.prev {
      left: 270px;
    }
    /deep/ .carousel-indicator {
      padding-left: 250px;
    }
  }
}
</style>
